<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>发帖</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
            border: none;
            box-sizing: border-box;
            outline: none;
        }

        .box {
            width: 150px;
            height: 50px;
            text-align: center;
        }

        input {
            display: none;
        }

        label {
            width: 100%;
            height: 100%;
            display: inline-block;
            position: relative;
            line-height: 50px;
            color: #999;
        }

        label:active {
            background: #EEEEEE;
        }

        label:after {
            content: "";
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid green;
            position: absolute;
            top: 15px;
            left: 15px;
            border-radius: 20px;
        }

        input:checked+label:after {
            background-color: rgb(68, 189, 211);
        }

        .line {
            width: 100%;
            height: 1px;
            background: rgb(19, 18, 18);
            opacity: 0.2;
        }
    </style>
</head>

<body style="background-color: #f0f2f5">
    <div class="row clearfix" style="background-color:#393d49">
        <div class="col-md-12 column">
            <ul class="nav nav-pills">
                <li style="margin-left: 5%">
                    <a href="index2">首页</a>
                </li>
                <li>
                    <a href="#">板块</a>
                </li>
                <li>
                    <a href="#">帮助</a>
                </li>
                <li style="margin-left: 70%">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span
                            class="glyphicon glyphicon-user">&nbsp;</span>欢迎你！${sessionScope.session_user.getName()}<strong
                            class="caret"></strong></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="center">个人中心</a>
                        </li>
                        <li>
                            <a href="logout">退出登录</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <form action="postArticle?name=${sessionScope.session_user.getName()}">
        <div class="container">
            <h3 class="text-left text-info">
                标题：
            </h3>
            <input type="text" class="form-control" placeholder="文章标题" id="title" name="title">
            <h3 class="text-left text-info">
                内容：
            </h3>
            <textarea class="form-control" rows="20" placeholder="请勿发布反动，色情等不良言论" id="text" name="text"></textarea></br>
            <button type="submit" class="btn btn-lg btn-info btn-block"><span
                    class="glyphicon glyphicon-pencil">&nbsp;</span>发 帖</button>
        </div>
        <div style="margin-top: -25%; margin-left: 90%">
            <div class="box">
                <input type="radio" id="radio1" name="life" /><label
                    for="radio1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<em class="glyphicon glyphicon-home"></em>
                    &nbsp;生活</label>
            </div>
            <div class="line"></div>
            <div class="box">
                <input type="radio" id="radio2" name="em" /><label
                    for="radio2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<em class="glyphicon glyphicon-tags"></em>
                    &nbsp;校园</label>
            </div>
            <div class="line"></div>
            <div class="box">
                <input type="radio" id="radio3" name="school" /><label
                    for="radio3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<em
                        class="glyphicon glyphicon-headphones"></em>
                    &nbsp;娱乐</label>
            </div>
            <div class="line"></div>
        </div>
    </form>
</body>

</html>